<!--
 * @Author: 汪圣哲 wanghist061@163.com
 * @Date: 2024-02-29 15:15:21
 * @LastEditors: 汪圣哲 wanghist061@163.com
 * @LastEditTime: 2024-03-07 16:46:12
 * @FilePath: \my_backstage\src\components\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <div class="header-container">
        <div style="display: flex;align-items: center;">
            <img class="logo" src="../assets/logo.png" alt="" style="height: 45px;margin-right: 20px;">
            <h2 style="color: white;">教育资源共享平台</h2>
        </div>
        <div class="r-content">
            <img class="user" src="../assets/images/user.png" alt="">
            <el-dropdown @command="handleClick">
                <span class="el-dropdown-link">Admin</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
    methods: {
        handleClick(command) {
            if (command === 'logout') {
                Cookie.remove('token')
                Cookie.remove('menu')
                alert('退出成功！');
                this.$router.push('/login')
            }
        }
    },
}
</script>

<style lang="less" scoped>
.header-container {
    background-color: #333;
    height: 75px;

    // 让按钮和头像居中
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 不要紧贴边框
    padding: 0 20px;

    .user {
        width: 40px;
        height: 40px;
        // 50%变圆形
        border-radius: 50%;
    }

    .r-content {
        display: flex;
        align-items: center;

        .el-dropdown-link {
            cursor: pointer;
            color: white;
            margin-left: 20px;
        }
    }
}
</style>